AngularJS Routing

ஒற்றை பக்க பயன்பாடுகளை உருவாக்க ngRoute தொகுதியைப் பயன்படுத்தவும்

AngularJS Routing

ngRoute தொகுதி உங்கள் பயன்பாட்டை ஒரு ஒற்றை பக்க பயன்பாடாக மாற்ற உதவுகிறது.

AngularJS இல் Routing என்றால் என்ன?

உங்கள் பயன்பாட்டில் வெவ்வேறு பக்கங்களுக்கு செல்ல விரும்பினால், ஆனால் பக்கத்தை மீண்டும் ஏற்றாமல் பயன்பாடு ஒரு SPA (ஒற்றை பக்க பயன்பாடு) ஆக இருக்க வேண்டும் என்றால், நீங்கள் ngRoute தொகுதியைப் பயன்படுத்தலாம்.

ngRoute தொகுதி உங்கள் பயன்பாட்டை முழு பயன்பாட்டையும் மீண்டும் ஏற்றாமல் வெவ்வேறு பக்கங்களுக்கு வழிநடத்துகிறது.

உதாரணம்:

"red.htm", "green.htm", மற்றும் "blue.htm" க்கு செல்லவும்:

<body ng-app="myApp">

<p><a href="#/!">முகப்பு</a></p>

<a href="#!red">சிவப்பு</a>
<a href="#!green">பச்சை</a>
<a href="#!blue">நீலம்</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>

எனக்கு என்ன தேவை?

உங்கள் பயன்பாடுகளை routing க்குத் தயாராக்க, நீங்கள் AngularJS Route தொகுதியைச் சேர்க்க வேண்டும்:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

பின்னர் நீங்கள் பயன்பாட்டுத் தொகுதியில் ngRoute ஐ ஒரு சார்பாகச் சேர்க்க வேண்டும்:

var app = angular.module("myApp", ["ngRoute"]);

இப்போது உங்கள் பயன்பாட்டிற்கு route தொகுதிக்கு அணுகல் உள்ளது, இது $routeProvider ஐ வழங்குகிறது.

உங்கள் பயன்பாட்டில் வெவ்வேறு வழிகளை உள்ளமைக்க $routeProvider ஐப் பயன்படுத்தவும்:

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

அது எங்கு செல்கிறது?

உங்கள் பயன்பாட்டிற்கு routing மூலம் வழங்கப்படும் உள்ளடக்கத்தை வைக்க ஒரு கொள்கலன் தேவை.

இந்த கொள்கலன் ng-view உத்தரவு ஆகும்.

உங்கள் பயன்பாட்டில் ng-view உத்தரவைச் சேர்ப்பதற்கு மூன்று வெவ்வேறு வழிகள் உள்ளன:

உதாரணம் 1:

<div ng-view></div>

உதாரணம் 2:

<ng-view></ng-view>

உதாரணம் 3:

<div class="ng-view"></div>

முக்கியமான குறிப்பு:

பயன்பாடுகளில் ஒரே ஒரு ng-view உத்தரவு மட்டுமே இருக்க முடியும், மேலும் இது வழி மூலம் வழங்கப்படும் அனைத்து காட்சிகளுக்கும் ஒரு இடக்குறிப்பாக செயல்படும்.

$routeProvider

$routeProvider உடன், ஒரு பயனர் ஒரு இணைப்பைக் கிளிக் செய்யும் போது எந்தப் பக்கத்தைக் காட்ட வேண்டும் என வரையறுக்கலாம்.

உதாரணம்:

$routeProvider ஐ வரையறுக்கவும்:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

உங்கள் பயன்பாட்டின் config முறையைப் பயன்படுத்தி $routeProvider ஐ வரையறுக்கவும்.

config முறையில் பதிவு செய்யப்பட்ட வேலை பயன்பாடு ஏற்றப்படும் போது செய்யப்படும்.

கட்டுப்படுத்திகள்

$routeProvider உடன், ஒவ்வொரு "காட்சிக்கும்" ஒரு கட்டுப்படுத்தியை வரையறுக்கலாம்.

உதாரணம்:

கட்டுப்படுத்திகளைச் சேர்க்கவும்:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "நான் லண்டனை விரும்புகிறேன்";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "நான் பாரிஸை விரும்புகிறேன்";
});

"london.htm" மற்றும் "paris.htm" சாதாரண HTML கோப்புகள், அவற்றில் உங்கள் AngularJS பயன்பாட்டின் மற்ற HTML பகுதிகளைப் போலவே AngularJS வெளிப்பாடுகளைச் சேர்க்கலாம்.

கோப்புகள் இப்படி இருக்கும்:

london.htm

<h1>லண்டன்</h1>
<h3>லண்டன் இங்கிலாந்தின் தலைநகரம்.</h3>
<p>இது ஐக்கிய இராச்சியத்தில் மிகவும் மக்கள்தொகை கொண்ட நகரம், 13 மில்லியனுக்கும் மேற்பட்ட மக்கள் தொகை கொண்ட பெருநகரப் பகுதி.</p>
<p>{{msg}}</p>

paris.htm

<h1>பாரிஸ்</h1>
<h3>பாரிஸ் பிரான்சின் தலைநகரம்.</h3>
<p>பாரிஸ் பகுதி ஐரோப்பாவில் மிகப்பெரிய மக்கள்தொகை மையங்களில் ஒன்றாகும், 12 மில்லியனுக்கும் மேற்பட்ட மக்கள்தொகை கொண்டது.</p>
<p>{{msg}}</p>

வார்ப்புரு

முந்தைய உதாரணங்களில் $routeProvider.when முறையில் templateUrl பண்பைப் பயன்படுத்தினோம்.

நீங்கள் template பண்பையும் பயன்படுத்தலாம், இது பண்பு மதிப்பில் நேரடியாக HTML எழுத உங்களை அனுமதிக்கிறது, மேலும் ஒரு பக்கத்தைக் குறிப்பிடாது.

உதாரணம்:

வார்ப்புருக்களை எழுதவும்:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    template : "<h1>முகப்பு</h1><p>இந்த உள்ளடக்கத்தை மாற்ற இணைப்புகளில் கிளிக் செய்யவும்</p>"
  })
  .when("/banana", {
    template : "<h1>வாழைப்பழம்</h1><p>வாழைப்பழங்களில் சுமார் 75% நீர் உள்ளது.</p>"
  })
  .when("/tomato", {
    template : "<h1>தக்காளி</h1><p>தக்காளிகளில் சுமார் 95% நீர் உள்ளது.</p>"
  });
});

வேறுபாடு:

templateUrl: வெளிப்புற HTML கோப்பை சுட்டிக்காட்டுகிறது
template: நேரடி HTML உள்ளடக்கத்தைக் கொண்டுள்ளது

otherwise முறை

முந்தைய உதாரணங்களில் $routeProvider இன் when முறையைப் பயன்படுத்தினோம்.

நீங்கள் otherwise முறையையும் பயன்படுத்தலாம், இது மற்றவை பொருந்தாத போது இயல்புநிலை வழியாகும்.

உதாரணம்:

"வாழைப்பழம்" அல்லது "தக்காளி" இணைப்பு கிளிக் செய்யப்படவில்லை என்றால், அவர்களுக்குத் தெரியப்படுத்தவும்:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/banana", {
    template : "<h1>வாழைப்பழம்</h1><p>வாழைப்பழங்களில் சுமார் 75% நீர் உள்ளது.</p>"
  })
  .when("/tomato", {
    template : "<h1>தக்காளி</h1><p>தக்காளிகளில் சுமார் 95% நீர் உள்ளது.</p>"
  })
  .otherwise({
    template : "<h1>எதுவும் இல்லை</h1><p>எதுவும் தேர்ந்தெடுக்கப்படவில்லை</p>"
  });
});

பாதுகாப்பு:

otherwise முறை இல்லாத வழிகளைக் கையாளப் பயன்படுகிறது. இது பயனர் தவறான URL ஐ உள்ளிடும் போது பிழை பக்கங்களைக் காட்ட உதவுகிறது.

முழுமையான உதாரணம்

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="myApp">

<nav>
  <a href="#!/">முகப்பு</a>
  <a href="#!london">லண்டன்</a>
  <a href="#!paris">பாரிஸ்</a>
  <a href="#!tokyo">டோக்கியோ</a>
</nav>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    template : "<h1>முகப்பு</h1><p>ஒரு நகரத்தைத் தேர்ந்தெடுக்கவும்</p>"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  })
  .when("/tokyo", {
    template : "<h1>டோக்கியோ</h1><p>டோக்கியோ ஜப்பானின் தலைநகரம்.</p>"
  })
  .otherwise({
    template : "<h1>பக்கம் கிடைக்கவில்லை</h1><p>404 பிழை - பக்கம் கிடைக்கவில்லை</p>"
  });
});

app.controller("londonCtrl", function ($scope) {
  $scope.msg = "லண்டன் பற்றிய கூடுதல் தகவல்";
});

app.controller("parisCtrl", function ($scope) {
  $scope.msg = "பாரிஸ் பற்றிய கூடுதல் தகவல்";
});
</script>

</body>
</html>

பயிற்சி

கீழே உள்ள பயிற்சியில் AngularJS Routing பற்றிய உங்கள் புரிதலை சோதிக்கவும்:

AngularJS Routing பயிற்சி

ngRoute தொகுதி ஒற்றை பக்க பயன்பாடுகளை உருவாக்க உதவுகிறது
✓ சரி! ngRoute பக்க மீள் ஏற்றம் இல்லாமல் வெவ்வேறு காட்சிகளுக்கிடையே செல்ல உதவுகிறது
ஒரு பயன்பாட்டில் பல ng-view உத்தரவுகள் இருக்க முடியும்
✗ தவறு! ஒரு பயன்பாட்டில் ஒரே ஒரு ng-view உத்தரவு மட்டுமே இருக்க முடியும்
otherwise() முறை இயல்புநிலை வழியை வரையறுக்கப் பயன்படுகிறது
✓ சரி! otherwise() பொருந்தாத அனைத்து வழிகளுக்கும் இயல்புநிலையை வரையறுக்கிறது
templateUrl பண்பு நேரடி HTML ஐ வைத்திருக்கிறது
✗ தவறு! templateUrl வெளிப்புற HTML கோப்பைச் சுட்டிக்காட்டுகிறது, template நேரடி HTML ஐ வைத்திருக்கிறது

சிறந்த நடைமுறைகள்

இணைப்புகளுக்கு #! பயன்படுத்தவும்

AngularJS routing இல் இணைப்புகளுக்கு #! (hashbang) பயன்படுத்தவும், இது search engine optimization க்கு உதவுகிறது.

otherwise() முறையைப் பயன்படுத்தவும்

பொருந்தாத வழிகளைக் கையாள otherwise() முறையைப் பயன்படுத்தவும், இது பயனர் அனுபவத்தை மேம்படுத்துகிறது.

மிகப்பெரிய வார்ப்புருக்களைத் தவிர்க்கவும்

நேரடி HTML உடன் பெரிய வார்ப்புருக்களைத் தவிர்க்கவும் - மாறாக templateUrl உடன் வெளிப்புற கோப்புகளைப் பயன்படுத்தவும்.

மாடுலர் கட்டமைப்பைப் பயன்படுத்தவும்

பெரிய பயன்பாடுகளுக்கு, கட்டுப்படுத்திகள் மற்றும் வார்ப்புருக்களை தனி கோப்புகளாக வைக்கவும்.